<template>
    <div id="addTrends">
        <head-tip @tomove="toSomeUrl" title='发布产品' :isProduce=true>
            <div class="head-right">
                <span @click="sendProduce" class="link icon-only" style="font-size: 18px; margin-right: 10px;color: #333;">发布</span>
            </div>
        </head-tip>
        <section class="produce-card">
            <div class="content-block" style="padding:0;margin:0">
                <div class="produce-title">
                    <input type="text" v-model="produceajax.cname" placeholder="产品名称">
                </div>
                <el-input type="textarea" v-model="produceajax.ccontent"  placeholder="请输入产品描述" size='medium'></el-input>
                <div class="clearfix" id="artice-imgs">
                    <img  v-if="logofileurl" @click="delLogo" :src="logofileurl" alt="" style="height: 150px;width: 150px;margin: 10px auto;display: block;" />
                </div>
                <div style="position:relative;float:left;margin-left: 2%;">
                    <input  @change="chooseLogo" type="file" class="btn-add-input"  accpet="image/*" id="logo"> 
                    <div class="btn-add" >+</div>
                </div>
                <span style="font-size:0.7rem; color:#666; padding-left:0.5rem;line-height:60px"> 产品Logo</span>
                <div class="clearfix" id="artice-imgs">
                    <img  v-for="(item,key) in imgfileurl" :key="key" @click="delimg(key)" :src="item" alt="" style="height: 60px;width: 60px;margin: 10px 5px;" />
                </div>
                <div style="position:relative;float:left; margin-left: 2%;">
                    <input  @change="chooseImg" type="file" multiple class="btn-add-input"  accpet="image/*"> 
                    <div class="btn-add" >+</div>
                </div>
                <span style="font-size:0.7rem; color:#666; padding-left:0.5rem;line-height:60px"> 更多图片...</span>
            </div>  
            <div v-if="tochoose" @click="beforeCh" class="chooseCard">请选择要发布的名帖（已选{{this.$store.state.publicCard.length}}）</div> 
        </section>
        <mt-popup v-model="isshowwaitpopup" closeOnClickModal=false>
          <mt-spinner type="fading-circle" color="#fff" :size="40"></mt-spinner>
        </mt-popup>
    </div>
</template>

<script>
import headTip from '@/components/common/head'
import myCheck from '@/components/common/checklist'
export default {
    data(){
        return {
            chooseArr:this.$store.state.publicCard,//名帖id数值
            isshowwaitpopup:false,
            imgfile:[],
            imgfileurl:[],
            logofile:'',
            logofileurl:'',
            produceajax:{
                cname:'',
                ccontent:'',
                ccardid:this.$route.query.id,
            },
            tochoose:false,
            isBack:false,//跳转方式
        }
    },
    methods:{
        chooseImg(e){
            var files = e.target.files
            var filesurl=[]
            var _this=this
            if(files.length+this.imgfile.length>10){
                alert('最多上传10张照片')
                return false;
            }
            for (var value of files){
                if(typeof value=='object'){
                    this.imgfile.push(value)
                }
            }
             this.imgfile.forEach(function(v,k){
                 var src = window.URL.createObjectURL(v);
                 filesurl.push(src)
            })
            _this.imgfileurl=filesurl
        },
        delimg(key){
            this.imgfileurl.splice(key,1)
            this.imgfile.splice(key,1)
        },
        chooseLogo(e){
            var fileone = e.target.files[0]
            var src = window.URL.createObjectURL(fileone);
            this.logofile=fileone
            this.logofileurl=src
        },
        delLogo(){
            this.logofile=''
            this.logofileurl=''
            document.querySelector('#logo').value=''
        },
        sendProduce(){
            var _this = this;
            if(!this.produceajax.cname){
                alert('请输入产品名称')
                return false
            }
            if(!this.produceajax.ccontent){
                alert('请输入产品描述')
                return false
            }
            if(!this.logofile){
                alert('请上传产品logo')
                return false
            }
            if(_this.tochoose && _this.chooseArr.length<=0){
                alert('请输选择要发布的名帖')
                return false
            }
            if(!_this.produceajax.ccardid>0){
                console.log(_this.chooseArr)
                _this.produceajax.ccardid = _this.chooseArr.join(',')
            }
            this.isshowwaitpopup=true;
            var  formData=new FormData();
            formData.append('productlogo',this.logofile);
            for(let i in this.produceajax){
                formData.append(i,this.produceajax[i])
            }
            this.imgfile.forEach(function(v){
                if(v){
                    formData.append('files',v)
                }
            })
            this.$axios.post(this.httpurl('product/saveProduct'),formData)
            .then(response=>{
                var data=response.data
                console.log(data)
                if(data.result==1){
                    this.isshowwaitpopup=false
                    _this.$message({
                            duration: 2000,
                            message: '发布成功',
                            type: 'success'
                        })
                    setTimeout(function(){
                        if(!this.tochoose){
                            _this.$router.back(-1)
                        }else{
                            _this.$router.push({path:"/mine/myGood"})
                        }
                    },1000)
                }else{
                    this.isshowwaitpopup=false
                    _this.$message({
                            duration: 2000,
                            message: '发布失败',
                            type: 'error'
                        })
                }
               
            })
            
        },
        // //选择名帖前
        beforeCh(){
            this.$router.push({path:"/mine/commonCard",query:{type:"product"}})
        },
        toSomeUrl(){
            if(!this.tochoose){
                this.$router.back(-1)
            }else{
                this.$router.push({path:"/mine/myGood"})
            }
        }
    },  
    activated(){
        this.chooseArr = this.$store.state.publicCard
    },
    components:{
        headTip,
        myCheck
    },
    created(){
    },
    mounted(){
        let id = this.$route.query.id;
        if(id > 0){
            this.tochoose = false
        }else{
            this.tochoose = true
        }
    },
    activated(){
        if(this.$route.meta.isActive){
            this.imgfile=[]
            this.imgfileurl=[]
            this.logofile=''
            this.logofileurl=''
            this.produceajax.ccontent=''
            this.produceajax.cname=''
        }
    },
    beforeRouteEnter(to,from,next){
        if(from.name != 'commonCard'){
            to.meta.isActive = true;
        }
        next();
    },
    beforeRouteLeave(to,from,next){
        from.meta.isActive = false;
        next();
    }
}
</script>

<style scoped>
.produce-card{box-sizing: border-box;margin-top: 50px;}
.btn-add{height: 50px; width: 50px; border: 0.01rem solid #ccc; display: inline-block; line-height: 46px; text-align: center; font-size:2rem; margin-top: 5px; margin-bottom: 15px; color:#666;}
.btn-add-input{opacity: 0;position:absolute;height:50px;width:50px;top:0;left:0}
.produce-title {
    padding: .6rem 2%;
    background: #f9f9f9;
    margin-bottom: 10px;
}
.produce-title input[type="text"] {
    border: none;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    padding: 5px;
    color: #666;
    font-family: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "宋体", Arial, Verdana, sans-serif;
    width: 100%;
    background: #f9f9f9;
    outline: none;
    border-radius: none;
}
.mint-popup{background: rgba(255,255,255,0);}
.chooseCard{
    text-align:left;
    color:red;
    display: block;
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    padding: 0 1rem;
    background: #efefef;
    box-sizing:border-box;
}
</style>
<style>
	.el-textarea__inner{height: 150px;}
</style>
